<template>
	<view class="box">
		<view class="main">
			<view class="top">
				<view class="item">
					<view class="itemtop">
						我的专属邀请码  
						<!-- <image :src="baseUrl + '/static/icon/wenhao.png'" mode="aspectFill"></image> -->
					</view>
					<view class="itemmain">
						<text>{{info.invite_code}}</text>
						<view class="btn" @click="copy">
							复制
						</view>
					</view>
				</view>
				<view class="item">
					<view class="itemtop">
						我的专属邀请码  
						<!-- <image :src="baseUrl + '/static/icon/wenhao.png'" mode="aspectFill"></image> -->
					</view>
					<view class="itemmain">
						<image :src="baseUrl + '/static/icon/code.png'" mode="aspectFill"></image>
						<view class="btn" @click="goinvitecodepage" >
							查看
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="itembot">
					我的邀请注册链接 
					 <!-- <image :src="baseUrl + '/static/icon/wenhao.png'" mode="aspectFill"></image> -->
				</view>
				<view class="itemmain2">
					<text>{{info.register_url}}</text>
					<view class="btn" @click="copy2" >
						复制
					</view>
				</view>
			</view>
			<view class="bots"  v-if="!info.parent_user">
				<text>我的邀请人</text>
				<view class="">
					<text v-if="!info.parent_user" @click="goinvitecode" >未设置，去绑定</text>
					<image class="right" :src="baseUrl + '/static/icon/right.png'" mode="aspectFill"></image>
				</view>
			</view>
			</view>
			<view class="wrap">
				<view class="tit">
					我邀请的伙伴（{{info.recommend_list.total}}人）
				</view>
				<view class="wrapitem"  v-for="item in lists" :key="item.id" >
					<view class="user">
						<image :src="item.avatar" mode="aspectFill"></image>
						<view class="useritem">
							<view class="name">
								{{item.nickname}}
							</view>
							<view class="account">
								账号:{{item.mobile_format}}
							</view>
						</view>
					</view>
					<!-- <text class="tag">tag</text> -->
					<text class="tag2">{{item.creation_system_name}}</text>
				</view>
				<noDatas  :xxxList="lists" :status="status"></noDatas>
			</view>
	</view>
</template>

<script>
	import {recommend} from "../../api/user.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				page:1,
				size:50,
				status:"loadmore",
				lists:[],
				info:{}
			}
		},
		onLoad(){
			this.getinfo()
		},
		methods: {
			getinfo(){
				recommend({
					page:this.page,
					page_size:this.size
				}).then(res=>{
					this.info=res.data
					if (res.code == 1) {
						let list = res.data.recommend_list.data;
						this.lists = this.page == 1 ? list : this.lists.concat(list);
						console.log(this.lists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			copy(){
				uni.setClipboardData({
					data: this.info.invite_code,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			copy2(){
				uni.setClipboardData({
					data: this.info.register_url,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			gomyinvite(){
				uni.navigateTo({
					url:"/pageUser/myuser/myinviter"
				})
			},
			goinvitecode(){
				uni.navigateTo({
					url:"/pageUser/myuser/invitecode"
				})
			},
			goinvitecodepage(){
				uni.navigateTo({
					url:"/pageUser/myuser/invitecodepage"
				})
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getinfo()
			}
		},
	}
</script>

<style lang="scss">
	.box{
		width: 750rpx;
		height: 90vh;
	}
	.main{
		width: 690rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		.top{
			width: 640rpx;
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;
			margin: 0 auto;
			.item{
				display: flex;
				flex-direction: column;
				.itemtop{
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 30rpx;
					color: #666666 !important;
					>image{
						width: 28rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}
				.itemmain{
					width: 238rpx;
					height: 60rpx;
					background: #F2F2F2;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					text-align: center;
					line-height: 60rpx;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					color: #333;
					>image{
						width: 40rpx;
						height: 40rpx;
					}
					.btn{
						width: 70rpx;
						height: 40rpx;
						background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						text-align: center;
						line-height: 40rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	.itembot{
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
		margin-left: 24rpx;
		margin-top: 50rpx;
		>image{
			width: 28rpx;
			height: 28rpx;
			margin-left: 10rpx;
		}
	}
	.itemmain2{
		width: 642rpx;
		height: 60rpx;
		background: #F2F2F2;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		text-align: center;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-left: 22rpx;
		color: #333;
		>image{
			width: 40rpx;
			height: 40rpx;
		}
		.btn{
			width: 70rpx;
			height: 40rpx;
			background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			text-align: center;
			line-height: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-right: 16rpx;
		}
		>text{
			width: 450rpx;
			white-space: nowrap;         /* 强制文本不换行 */
			  overflow: hidden;           /* 隐藏溢出部分 */
			  text-overflow: ellipsis;    /* 显示省略号 */
		}
	}
	.right{
		width: 8rpx;
		height: 16rpx;
		margin-left: 20rpx;
	}
	.bots{
		width: 640rpx;
		margin: 0 auto ;
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		margin-top: 52rpx;
	}
	.wrap{
		width: 690rpx;
		min-height: 1000rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
	}
	.tit{
		margin-top: 30rpx;
		padding-top: 38rpx;
		margin-left: 24rpx;
		font-weight: 400;
		font-size: 30rpx;
	}
	.wrapitem{
		width: 642rpx;
		height: 96rpx;
		background: #F7F7F7;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		margin-top: 20rpx;
		.user{
			display: flex;
			align-items: center;
			>image{
				width: 72rpx;
				height: 72rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-left: 14rpx;
			}
			.useritem{
				display: flex;
				flex-direction: column;
				margin-left: 22rpx;
				.name{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
				.account{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-top: 14rpx;
				}
			}
		}
		.tag{
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin-right: 14rpx;
		}
		.tag2{
			font-weight: 400;
			font-size: 28rpx;
			color: #FFC300;
			margin-right: 14rpx;
		}
	}
</style>
